<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<!--[if lt IE 9]>
<script type="text/javascript" src="/static/v5//lib/html5shiv.js"></script>
<script type="text/javascript" src="/static/v5//lib/respond.min.js"></script>

<![endif]-->
<link rel="stylesheet" type="text/css" href="/static/v5//static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/static/v5//static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="/static/v5//lib/Hui-iconfont/1.0.8/iconfont.css" />

<link rel="stylesheet" type="text/css" href="/static/v5//static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="/static/v5//static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="/static/v5//lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<!--/meta 作为公共模版分离出去-->
	<style>
		.uploadBox{
			width: 100px;
			height: 100px;
			border: 1px solid #dadada;
			position: relative;
			background-color: #ffffff;
			cursor: pointer;
			float: left;
			margin-right: 20px;
		}
		.uploadBox .pic{
			width: 100%;
			height: 100%;
		}
		.uploadBox p{
			width: 100%;
			height: 100%;
			font-size: 24px;
			line-height: 100px;
			text-align: center;
			position: absolute;
			top: 0;
			margin: 0;
		}

		.uploadBox div{
			width: 100%;
			height: 30px;
			position: absolute;
			bottom: 0;
			right: 0;
			background-color: rgba(0,0,0,.6);
			z-index: 3;
			opacity: 0;
		}
		.uploadBox div img{
			width: 20px;
			height: 20px;
			display: block;
			margin: 5px auto;
		}
		.uploadBox .pic:hover+.active{
			opacity: 1;
		}
		.active:hover{
			opacity: 1;
		}
	</style>
</head>
<body>
<div class="page-container">
	<form action="" method="post" class="form form-horizontal" id="form-article-add">

		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>园区名称：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" id="campus_name" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>登陆账号：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" id="campus_account" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>登陆密码：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="password" class="input-text" placeholder="" id="campus_psd" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>园区类型：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<select name="" class="select" id="campus_type">

					<th:block  th:each="bean: ${campus_type}">
						<option th:value="${bean.dict_id}" th:text="${bean.code_name}"></option>
					</th:block>
				</select>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>园区所在省市：</label>
			<div class="formControls col-xs-8 col-sm-9">
				省：<select name="" class="select" id="province_id" onchange="city()">

					<th:block  th:each="bean: ${province}">
						<option th:value="${bean.dict_id}" th:text="${bean.code_name}" ></option>
					</th:block>
				</select>
				市：<select name="" class="select" id="city_id">

					<th:block  th:each="bean: ${city}">
						<option th:value="${bean.dict_id}" th:text="${bean.code_name}"></option>
					</th:block>
				</select>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>图片上传：</label>
			<input type="file" hidden  id="uploadImg" accept="image/png, image/jpeg, image/gif, image/jpg" onchange="ajaxImg(this)">
			<div class="formControls col-xs-8 col-sm-9">
				<div class="uploadBox" onclick="toUploadImg(this)">
					<img src="" alt="" class="pic">
					<div><img src="/static/v5/img/Trash.png" alt="" onclick="deleteImg(this)"></div>
					<p>+</p>
				</div>


			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>园区标签以,分割 最多三个：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" id="campus_label" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>园区地址：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="" id="address" name="">
			</div>
	    </div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>日租(每平米/每日)：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="0" placeholder="" id="day_rent" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>月租(每平米/每月)：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="0" placeholder="" id="month_rent" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>从业人数：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="0" placeholder="" id="employed_size" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>招商热线：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="0" placeholder="" id="hotline" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>园区官网：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="0" placeholder="" id="campus_uccn" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>经度：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="0" placeholder="" id="longitude" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>纬度：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="0" placeholder="" id="latitude" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>成立时间：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" onfocus="WdatePicker({ dateFmt:'yyyy-MM-dd'})" id="datemin" class="input-text Wdate" style="width:180px;">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">基本情况：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<div id="editor">

				</div>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">园区特点：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<div id="editor2">

				</div>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">运行情况：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<div id="editor3">

				</div>
			</div>
		</div>
		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<button  class="btn btn-primary radius" type="button" id="btn1" ><i class="Hui-iconfont">&#xe632;</i>保存</button>

			</div>
		</div>
	</form>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/static/v5//lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/v5//lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/static/v5//static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/static/v5//static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="/static/v5//js/wangEditor.min.js"></script>
<script type="text/javascript" src="/static/v5/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" th:inline="javascript">
    var token = [[${token}]];

    var E = window.wangEditor
    var editor = new E('#editor')
    // 关闭粘贴内容中的样式
    editor.customConfig.pasteFilterStyle = false
    // 忽略粘贴内容中的图片
    editor.customConfig.pasteIgnoreImg = true
    // 使用 base64 保存图片
    //editor.customConfig.uploadImgShowBase64 = true

    // 上传图片到服务器
    editor.customConfig.uploadFileName = 'frontFile'; //设置文件上传的参数名称
    editor.customConfig.uploadImgServer = '/v5/activity/fileImg'; //设置上传文件的服务器路径
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
    //自定义上传图片事件
    editor.customConfig.uploadImgHooks = {
        before : function(xhr, editor, files) {

        },
        success : function(xhr, editor, result) {
            console.log("上传成功");
        },
        fail : function(xhr, editor, result) {
            console.log("上传失败,原因是"+result);
        },
        error : function(xhr, editor) {
            console.log("上传出错");
        },
        timeout : function(xhr, editor) {
            console.log("上传超时");
        }
    }

    editor.create()
    var editor2 = new E('#editor2')
    // 关闭粘贴内容中的样式
    editor2.customConfig.pasteFilterStyle = false
    // 忽略粘贴内容中的图片
    editor2.customConfig.pasteIgnoreImg = true
    // 使用 base64 保存图片
    //editor.customConfig.uploadImgShowBase64 = true

    // 上传图片到服务器
    editor2.customConfig.uploadFileName = 'frontFile'; //设置文件上传的参数名称
    editor2.customConfig.uploadImgServer = '/v5/activity/fileImg'; //设置上传文件的服务器路径
    editor2.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
    //自定义上传图片事件
    editor2.customConfig.uploadImgHooks = {
        before : function(xhr, editor, files) {

        },
        success : function(xhr, editor, result) {
            console.log("上传成功");
        },
        fail : function(xhr, editor, result) {
            console.log("上传失败,原因是"+result);
        },
        error : function(xhr, editor) {
            console.log("上传出错");
        },
        timeout : function(xhr, editor) {
            console.log("上传超时");
        }
    }

    editor2.create()
    var editor3 = new E('#editor3')
    // 关闭粘贴内容中的样式
    editor3.customConfig.pasteFilterStyle = false
    // 忽略粘贴内容中的图片
    editor3.customConfig.pasteIgnoreImg = true
    // 使用 base64 保存图片
    //editor.customConfig.uploadImgShowBase64 = true

    // 上传图片到服务器
    editor3.customConfig.uploadFileName = 'frontFile'; //设置文件上传的参数名称
    editor3.customConfig.uploadImgServer = '/v5/activity/fileImg'; //设置上传文件的服务器路径
    editor3.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
    //自定义上传图片事件
    editor3.customConfig.uploadImgHooks = {
        before : function(xhr, editor, files) {

        },
        success : function(xhr, editor, result) {
            console.log("上传成功");
        },
        fail : function(xhr, editor, result) {
            console.log("上传失败,原因是"+result);
        },
        error : function(xhr, editor) {
            console.log("上传出错");
        },
        timeout : function(xhr, editor) {
            console.log("上传超时");
        }
    }

    editor3.create()
    $("#btn1").click(function(){

        var day_rent = new Number($("#day_rent").val() * 100);
        var month_rent = new Number($("#month_rent").val() * 100);
        var data = "token=" + token  +  "&campus_name=" + $("#campus_name").val()+  "&campus_type=" + $("#campus_type").val()
            +  "&campus_account=" + $("#campus_account").val() +  "&campus_psd=" + $("#campus_psd").val()
            +  "&province_id=" + $("#province_id").val()     +  "&city_id=" + $("#city_id").val()
            +  "&campus_img=" +getAlluploadImg()  +  "&campus_label=" + $("#campus_label").val() +  "&address=" + $("#address").val()
            +  "&day_rent=" +  day_rent.toFixed(0)     +  "&month_rent=" + month_rent.toFixed(0)    +  "&employed_size=" + $("#employed_size").val()
            +  "&hotline=" + $("#hotline").val()     +  "&campus_uccn=" + $("#campus_uccn").val() +  "&longitude=" + $("#longitude").val()     +  "&latitude=" + $("#latitude").val()
            +  "&set_up_time_s=" + $("#datemin").val()
            + "&essential_condition=" + encodeURIComponent(editor.txt.html())+ "&campus_trait=" + encodeURIComponent(editor2.txt.html())+ "&running_condition=" + encodeURIComponent(editor3.txt.html())
        $.ajax({
            type:'post',
            url:'/v5/campus/add',
            dataType : 'json',
            data: data,

            success:function(data){
                if (data.mark=="0") {
                    alert(data.tip);
                } else {
                    alert(data.tip);
                }
            },
            error: function(textStatus) {
                alert(textStatus);
            }

        });
    });
</script>
<script>
    function city(){
        var parent_id = $("#province_id").val();
        var data = "parent_id=" + +  parent_id   + "&token="  + sessionStorage.getItem("token")
        $.ajax({
            type:'post',
            url:'/v5/dict/son/all',
            dataType : 'json',
            data: data,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success:function(data){
                if (data.mark == 0) {
                    var str = data.obj;
                    var html;
                    for (var i = 0; i < str.length; i++) {
                        html += '<option value="' + str[i].dict_id + '">' + str[i].code_name + '</option>';
                    }
                    $("#city_id").html(html)
                } else {
                    alert(data.tip)
                }
            }
        });

	}



</script>
<script>
    var dom
    var box
    var p
    function toUploadImg(ele){
        dom = ele.children[0]
        box = ele.children[1]
        p = ele.children[2]
        if(dom.getAttribute('src') !== ''){
            console.log('不为空')
            return false
        }
        document.getElementById('uploadImg').click()
    }
    function ajaxImg(ele) {
        var file=ele.files[0];
        var formData = new FormData();
        formData.append("frontFile", file);
        $.ajax({
            url: "/v5/admin/article/img",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                console.log(data);
                if (data.mark=="0") {
                    dom.src = data.tip;  //  '' 替换问ajax返回图片路径
                    box.classList.add("active");
                    p.style.display = 'none'
                } else {
                    alert(data.tip);
                }


            },
            error: function (data) {
                console.log(data);
            }
        });
    }
    function deleteImg(ele){
        var event = window.event || arguments.callee.caller.arguments[0]
        event.stopPropagation()
        var imgNode = ele.parentNode.parentNode.children[0]
        var p = ele.parentNode.parentNode.children[2]
        var div = ele.parentNode
        imgNode.setAttribute('src','')
        div.classList.remove("active");
        p.style.display = 'block'
    }
    function getAlluploadImg() {
        var imgSting = ''
        var nodeList = document.querySelectorAll('.pic')
        for(var i=0;i<nodeList.length;i++){
            var imgSrc = nodeList[i].getAttribute('src')
            if(!imgSrc==''){
                imgSting+= ',' + nodeList[i].getAttribute('src')
            }
        }
        return imgSting.substr(1,imgSting.length-1);
    }


</script>
</body>
</html>